import React, { memo } from 'react'
import CustomContainerHeader from '@/components/custom-container-header'

import Right3TimeIcon from '@/assets/img/right3-time-icon.png'
import Right3EventIcon from '@/assets/img/right3-event-icon.png'
import Right3CompressIcon from '@/assets/img/right3-compress-icon.png'

import { Right3Warpper } from './style'

const Right3 = memo(() => {
    const data = [
        { label: '节约总时间', id: 1, value: '142', unit: '小时', icon: Right3TimeIcon },
        { label: '今日处理事件', id: 2, value: '1', unit: '件', icon: Right3EventIcon },
        { label: '压缩时间比', id: 3, value: '10', unit: '%', icon: Right3CompressIcon },
        { label: '今日压缩时间比', id: 4, value: '35', unit: '小时', icon: Right3CompressIcon },

    ]
    return (
        <Right3Warpper>
            <CustomContainerHeader defaultSlot={'工地驿站'} clickRightHandle={e => { console.log('点击了详情页') }} />
            <div className="content-container">
                {data?.map(item => {
                    return (
                        <div key={item.id} className='item-container'>
                            <img src={item.icon} alt="" className='icon' />
                            <div className='info-box'>
                                <p className='label'>{item.label}</p>
                                <p>
                                    <span className='value'>{item.value}</span>
                                    <span className='unit'>{item.unit}</span>
                                </p>
                            </div>
                        </div>
                    )
                })}

                <div className="event-container">
                    <div>
                        <p className='title'>总处理事件</p>
                        <p className='num-box'>
                            <span className='value'>100</span>
                            <span className='unit'>件</span>
                        </p>
                    </div>
                </div>
            </div>
        </Right3Warpper>
    )
})

export default Right3